<template>
  <div class="readCalendar">
    <div class="cal-nav" 
    ref="nav"
    v-bind:style="`background:rgba(255,255,255,${num})`">
      <div class="my-back" v-on:click="backFn()">
        <i class="iconfont icon-arrowLeft-fill"></i>
      </div>
      <div class="cal-name">
        <span>波吉</span>
        <i class="iconfont icon-shixinjiantou-xiangshang-copy"></i>
      </div>
    </div>
    <!-- 左边日历 -->
    <div class="cal_month" ref="leftMon">
      <ul>
        <li v-for="(item, index) in arr" :key="index"
         :class="{active : index == nowIndex}"
         v-on:click="nowIndex = index">
          <a href="#">
            <span>{{ item.month }}</span>
          </a>
        </li>
      </ul>
    </div>
    <!-- 右边日历 -->
    <div class="cal_fintness">
      <div class="readCal">
        <h3>阅读日历</h3>
        <span>2022年1月1日来到孤岛</span>
        <div class="day_cal">
          <span>读了0篇文章</span>
          <span>读了0字想法</span>
          <span>打卡了0天</span>
        </div>
      </div>
      <div
        class="readMounth"
        v-for="(item, index) in newArr"
        :key="index"
        ref="readMounth"
      >
        <div class="cal_m">
          <h3>{{ item.month }}</h3>
        </div>
        <ul>
          <li v-for="item in newList" :key="item.num">
            <a href="#">
              <div class="cal_card">
                <span>{{ item.num }}</span>
                <span>{{ item.fintness }}</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import detail from "@/datajson/calendarData.json";
// console.log(detail);

export default {
  data() {
    return {
      arr: [
        { month: "一月" },
        { month: "二月" },
        { month: "三月" },
        { month: "四月" },
        { month: "五月" },
        { month: "六月" },
        { month: "七月" },
        { month: "八月" },
        { month: "九月" },
        { month: "十月" },
        { month: "十一月" },
        { month: "十二月" },
      ],
      newList: [],
      newArr: [],
      count: 0,
      height: 50,
      nowIndex : 0,
      menu_index: 0,
      num : 0
    };
  },
  watch:{
    nowIndex(){
      document.documentElement.scrollTop = this.$refs.readMounth[this.nowIndex].offsetTop;
    }
  },
  methods: {
    //返回
    backFn() {
      this.$router.go(-1);
    },
    //获取日期数据
    getMon() {
      let mounth = detail.result;
      this.newArr = mounth;
      this.newList = mounth[0].data;
    },
    //点击切换你
    setTab(index){
					this.nowIndex = index;
          this.menu_index = index + 0;
			},
    //滚动显示和隐藏
    scrollFn(dom) {
      let t = dom.scrollTop;
      // let nav = document.querySelector(".cal-nav");
      // let nav = this.$refs.nav;
      // console.log(nav);
      if (t < 50) {
        this.num = 0;
      } else {
        this.num = 0.5
      }
    },
  },
  created() {
    this.getMon();
  },
  mounted() {
    window.addEventListener("scroll",()=>{
      for(let i = 0;i < this.$refs.readMounth.length;i++){
        if(this.$refs.readMounth[i].offsetTop >= document.documentElement.scrollTop){
          this.nowIndex = i;
          break;
        }
      }
    })
    // this.$nextTick(() => {
    //   document.addEventListener("scroll", () => {
    //     this.scrollFn(document.documentElement);
    //   });
    // });
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/css/reset.css";

.readCalendar {
  width: 100%;
  height: 100%;
  position: relative;
  // 顶部
  .cal-nav {
    width: 100%;
    height: 50px;
    position: relative;
    position: fixed;
    background: rgba(255, 255, 255, 0);
    z-index: 999;
    div {
      height: 50px;
      position: absolute;
    }
    .my-back {
      width: 50px;
      text-align: center;
      line-height: 50px;
      i {
        font-size: 30px;
      }
    }
    .cal-name {
      width: 100px;
      left: 38%;
      text-align: center;
      padding-top: 5px;
      span {
        font-size: 20px;
      }
    }
  }
  // 左边月份
  .cal_month {
    width: 100px;
    height: 600px;
    padding-top: 30px;
    position: fixed;
    ul li {
      height: 43px;
      font-size: 18px;
      text-align: center;
      line-height: 43px;
      a{
        color: #747d8c;
      }
      &.active {
      background: rgba(255,255,255,0.5);
     }
    }
  }
  //右边签文
  .cal_fintness {
    width: 270px;
    padding-top: 50px;
    position: absolute;
    margin-left: 100px;
    //  阅读日历
    .readCal {
      span {
        font-size: 16px;
        color: #808080;
      }
      .day_cal {
        padding-top: 20px;
        letter-spacing: 2px;
        span {
          display: block;
        }
      }
    }
    .readMounth {
      .cal_m {
        padding-top: 50px;
        font-size: 20px;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 79px;
          height: 90px;
          margin-right: 10px;
          margin-top: 5px;
          .cal_card {
            width: 70px;
            height: 80px;
            text-align: center;
            background: #f0f0f0;
            border-radius: 2px;
            margin-top: 5px;
            margin-right: 20px;
            margin-left: 10px;
            span {
              display: block;
              &:first-child {
                line-height: 50px;
                font-size: 30px;
              }
              &:last-child {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}
</style>